<template>
  <a-form :model="currentTopic">
    <div class="score" v-for="(itesub, index) in currentTopic?.ckdaInfoList" :key="itesub.daId">
      <a-form-item
        :label="`${itesub.tmbh}:`"
        :key="itesub.kgtAutoId"
        :name="['ckdaInfoList', index, 'setCkda']"
        :rules="{ required: true, message: '答案不能为空', trigger: 'change' }"
      >
        <a-checkbox-group
          :key="itesub.kgtAutoId"
          v-model:value="itesub.setCkda"
          :options="itesub.radioLength"
          @change="handelChange($event, itesub)"
          class="p-1"
          :class="{
            'bg-green-200': itesub.jdZdf === itesub.tmfz,
            'bg-orange-200': itesub.jdZdf !== itesub.tmfz && itesub.jdZdf > 0,
          }"
        >
          <!-- <span
            class="mx-2 px-1"
            :class="{
              borderGreen: itesub.ckda?.includes(e.value),
            }"
            :key="e.value"
            v-for="e in itesub.radioLength"
          >
            <a-checkbox :value="e.value">{{ e.label }}</a-checkbox>
          </span> -->
        </a-checkbox-group>
      </a-form-item>
    </div>
    <a-form-item>
      <a-button type="primary" @click="subUpdatemit">确认提交并归档</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import { getJyxxList, setUpdateKgt } from '/@/api/queryScore'
import { useRoute } from 'vue-router'
import { isJdWrongType } from '/@/views/examination-audit/abnormal-teacher/index'
import { useTeacherMarkStore } from '/@/store/modules/teacherMark'
import aCheckbox from 'ant-design-vue/es/checkbox'

import { useMessage } from '/@/hooks/web/useMessage'
const { createMessage, createConfirm } = useMessage()
const teacherMarkStore = useTeacherMarkStore()
const route = useRoute()

const props = defineProps({
  kgtDetailVO: {
    type: Object,
    default: () => {},
  },
} as any)

const currentTopic = ref({
  ckdaInfoList: [],
  stId: '',
  kdkskmId: '',
} as any)

const emits = defineEmits(['statistiFun'])

function subUpdatemit() {
  let conFirmMess: any = createConfirm({
    iconType: 'warning',
    title: () => h('span', '温馨提醒'),
    content: () =>
      h('div', null, [
        h(
          'div',
          {
            style: {
              color: '#333',
            },
          },
          '您确定要提交归档吗？，请确认无误后再进行操作。'
        ),
        h(
          aCheckbox,
          {
            onChange: e => {
              conFirmMess.update({
                okButtonProps: {
                  disabled: !e.target.checked,
                  title: e.target.checked ? '我已阅读并了解' : '勾选确认后才可操作',
                },
              })
            },
            style: {
              position: 'absolute',
              bottom: '30px',
              left: '24px',
            },
          },
          '我已阅读并了解'
        ),
      ]),
    okButtonProps: {
      disabled: true,
      title: '勾选确认后才可操作',
    },
    onOk: () => {
      submit()
    },
  })
}

function submit() {
  if (currentTopic.value.ckdaInfoList.length === 0) return
  teacherMarkStore.setLoading(true)
  let list: any = []
  currentTopic.value.ckdaInfoList.forEach(item => {
    list.push({
      kmdm: route.query.kmdm,
      kgtAutoId: item.kgtAutoId,
      stId: item.stId,
      stPid: item.stPid,
      tmlx: item.tmlx,
      stFz: item.tmfz,
      ckda: item.ckda,
      jdDaFy: item.pyDa,
    })
  })

  setUpdateKgt(list)
    .then(({ code, message }) => {
      if (code == 200) {
        createMessage.success(message)
        getPageList()
      } else {
        createMessage.error(message)
      }
    })
    .finally(() => {
      teacherMarkStore.setLoading(false)
    })
}

function handelChange(e, arguent) {
  if (!arguent.pyDa && typeof arguent.pyDa !== 'boolean') arguent.pyDa = ''

  if (e.includes('Z') && !arguent.pyDa.includes('Z')) {
    arguent.setCkda = ['Z']
  } else if (e.includes('Z') && arguent.pyDa.includes('Z')) {
    arguent.setCkda.splice(arguent.setCkda.indexOf('Z'), 1)
  }

  arguent.pyDa = arguent.setCkda.join(',')
}

function getPageList() {
  getJyxxList({
    stId: props.kgtDetailVO.stId,
    kdkskmId: route.query.kdkskmId,
  }).then(res => {
    let studentInfo = {
      successCount: 0,
      errorCount: 0,
      halfRightCount: 0,
    }
    res.data
      .sort((a, b) => a.tmxh - b.tmxh)
      .forEach(item => {
        console.log(
          item,
          item.tmlx == '判断题' || props.kgtDetailVO.tmlx == '判断题' || item.xxsl <= 2
        )

        if (item.tmlx == '判断题') {
          item.radioLength = isJdWrongType.slice(isJdWrongType.length - 2)
        } else {
          item.radioLength = isJdWrongType.slice(0, item.xxsl)
        }
        item.setCkda = item.jdDaFy?.split(',') || ['Z']
        item.pyDa = item.jdDaFy || ''
        item.radioLength.push({
          label: '未作答',
          value: 'Z',
        })

        if (item.jdZdf === item.tmfz) {
          studentInfo.successCount++
        } else if (item.jdZdf !== item.tmfz && item.jdZdf > 0) {
          studentInfo.halfRightCount++
        } else {
          studentInfo.errorCount++
        }
      })
    props.kgtDetailVO.studentInfo = studentInfo
    currentTopic.value.ckdaInfoList = res.data || []
  })
}

onMounted(() => {
  getPageList()
})
</script>

<style scoped lang="less">
.borderGreen {
  border: 2px solid #52c41a;
  color: #52c41a;
}
</style>
